<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>单对象查询分析</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.css">
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="model" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
                <p>正在创建单对象查询分析...</p>
            </div>
        </div>
    </div>
</div>
<div id="map" style="width: 100%;height:100%"></div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.js"></script>
<script type="text/javascript" src="../../dist/iclient9-leaflet.min.js"></script>
<script type="text/javascript">
    var layer, info, processingUrl = "http://117.122.248.69:8090/iserver/services/spatialprocessing/rest/v1/jobs",
            map = L.map('map', {
                crs: L.CRS.TianDiTu_WGS84,
                center: [40.75, -73.95],
                maxZoom: 18,
                zoom: 12
            }),
            processingService = L.supermap.processingService(processingUrl);

    L.supermap.tiandituTileLayer("http://t{s}.tianditu.com/vec_c/wmts", {
        layer: "vec",
        tilematrixSet: "c"
    }).addTo(map);


    initForm();
    bindClick();


    function initForm() {
        info = L.control({position: 'topright'});
        info.onAdd = function () {
            var popup = L.DomUtil.create('div');
            popup.style = 'width:350px';
            popup.innerHTML = "<div class='panel panel-default'>" +
                    "<div class='panel-heading'>" +
                    "<h3 class='panel-title'>单对象查询分析</h3>" +
                    "</div>" +
                    "<div class='panel-body'>" +
                    "<div class='input-group'>" +
                    "<span class='input-group-addon'>源数据集<span title='必填字段' style='color: red;'> * </span>　</span>" +
                    "<input id='datasetName' type='text' class='form-control' " +
                    "value='ProcessingData_processing_newyorkZone_R'/>" +
                    "</div><p></p>" +
                    "<div class='input-group'>" +
                    "<span class='input-group-addon'>查询对象数据集<span title='必填字段' style='color: red;'> * </span></span>" +
                    "<input id='datasetQuery' type='text' class='form-control' " +
                    "value='ProcessingData_processing_singleRegion_R'/>" +
                    "</div><p></p>" +
                    "<div class='input-group'>" +
                    "<span class='input-group-addon'>空间查询模式<span title='必填字段' style='color: red;'> * </span></span>" +
                    "<select class='form-control' id='mode' name='mode'>" +
                    "<option value='CONTAIN'>包含</option>" +
                    "<option value='CROSS'>交叉</option>" +
                    "<option value='DISJOINT'>分离</option>" +
                    "<option value='IDENTITY'>重合</option>" +
                    "<option value='INTERSECT' selected>相交</option>" +
                    "<option value='OVERLAP'>叠加</option>" +
                    "<option value='TOUCH'>邻接</option>" +
                    "<option value='WITHIN'>被包含</option>" +
                    "</select>" +
                    "</div><p></p>" +
                    "<div align='right'>" +
                    "<input type='button' id='btn' class='btn btn-primary' value='创建'/>" +
                    "</div></div></div>";
            handleMapEvent(popup, this._map);
            return popup;
        };
        info.addTo(map);
    }

    function bindClick() {
        $('#btn').on('click', function () {
            $('#btn').prop('disabled', true);
            $("#model").modal({show: true, backdrop: 'static', keyboard: false});
            if (map && layer) {
                map.removeLayer(layer);
            }
            queryJobs();
        });
    }

    function queryJobs() {
        var singleObjectQueryJobsParameter = new SuperMap.SingleObjectQueryJobsParameter({
            datasetName: $('#datasetName').val(),
            datasetQuery: $('#datasetQuery').val(),
            mode: $('#mode option:selected').attr('value')
        });
        processingService.addQueryJob(singleObjectQueryJobsParameter, function (serviceResult) {
            if (serviceResult.error) {
                $('#btn').prop('disabled', false);
                $("#model").modal('hide');
                var errorMsg = serviceResult.error.errorMsg || "code: " + serviceResult.error.code;
                showAlert("创建失败!<br>" + errorMsg, false);
                return;
            }
            serviceResult.result.setting.serviceInfo.targetServiceInfos.map(function (info) {
                if (info.serviceType === 'RESTMAP') {
                    SuperMap.FetchRequest.get(info.serviceAddress + '/maps').then(function (response) {
                        return response.json();
                    }).then(function (result) {
                        var mapUrl = result[0].path;
                        layer = L.supermap.imageMapLayer(mapUrl, {noWrap: true, transparent: true});
                        layer.addTo(map);
                        $("#model").modal('hide');
                        $('#btn').prop('disabled', false);
                    });
                }
            });
        });
    }

    function showAlert(msg, state) {
        var className = "alert-";
        className += state ? "success" : "danger";
        if (!$('#msg_container')[0]) {
            var alertDiv = $("<div class='alert alert-dismissible' id='msg_container' role='alert' " +
                    "style='z-index:800;position: absolute;top: 20px;left: 40%;width:400px;display: none'>" +
                    "<button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>&times;</span></button>" +
                    "<strong><p id='msg' style='word-wrap: break-word'></p></strong></div>");
            $('body').append(alertDiv)
        }
        $('#msg_container').addClass(className);
        $('#msg_container').slideDown(300);
        $('#msg').html(msg);
    }

    function handleMapEvent(div, map) {
        if (!div || !map) {
            return;
        }
        div.addEventListener('mouseover', function () {
            map.dragging.disable();
            map.scrollWheelZoom.disable();
            map.doubleClickZoom.disable();
        });
        div.addEventListener('mouseout', function () {
            map.dragging.enable();
            map.scrollWheelZoom.enable();
            map.doubleClickZoom.enable();
        });
    }

</script>
</body>
</html>